<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="|#{customer.systemTitle}-图灵谷-全局配置-全局配置|">图灵谷</title>
<div th:replace="fragments/head_admin">head</div>
</head>
<body>
	<div class="layui-layout layui-layout-admin">
		<div th:replace="fragments/nav_admin">导航栏</div>
		<div th:replace="fragments/menu_admin::menu(parent=site,child=node)">菜单栏</div>
		<div class="layui-body">
			<div class="layui-main">
				<!--/***** 面包屑 *****/-->
				<div class="layui-elem-quote" style="margin-top: 10px;">
					<span class="layui-breadcrumb"> <a><cite>站点管理</cite></a> <a th:href="@{/admin/m/base/node/list.gsp}">栏目管理</a> <a><cite>编辑</cite></a>
					</span>
				</div>
				<form th:action="@{/admin/m/base/node/edit.gsp}" th:object="${result}" class="layui-form" id="editForm" role="form" action="#" method="post">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>编辑栏目</legend>
					</fieldset>
					<input th:field="*{id}" type="text" hidden="true" /> <input th:field="*{parentId}" type="text" hidden="true" />
					<div class="layui-form-item">
						<div class="layui-inline" style="width: 350px;">
							<label class="layui-form-label">栏目名称：<span style="color: red">*</span></label>
							<div class="layui-input-block">
								<input type="text" th:field="*{noddName}" name="noddName" placeholder="请输入栏目名称" lay-verify="noddName" required autocomplete="off" class="layui-input" autofocus="autofocus" maxlength="21">
							</div>
						</div>
						<div class="layui-inline" style="width: 350px;">
							<label class="layui-form-label">栏目代码：<span style="color: red">*</span></label>
							<div class="layui-input-block">
								<input type="text" th:field="*{codeNum}" name="codeNum" placeholder="请输入栏目代码" lay-verify="codeNum" required autocomplete="off" class="layui-input" autofocus="autofocus" maxlength="21">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline" style="width: 350px;">
							<label class="layui-form-label">栏目模型：<span style="color: red">*</span></label>
							<div class="layui-input-block">
								<select name="nodeModelId" th:field="*{nodeModelId}">
									<option th:each="data : ${nodeModels}" th:value="${data.id}" th:text="${data.modelName}">name</option>
								</select>
							</div>
						</div>
						<div class="layui-inline" style="width: 350px;">
							<label class="layui-form-label">文档模型：<span style="color: red">*</span></label>
							<div class="layui-input-block">
								<select name="infoModelId" th:field="*{infoModelId}">
									<option th:each="data : ${infoModels}" th:value="${data.id}" th:text="${data.modelName}">name</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline" style="width: 350px;">
							<label class="layui-form-label">栏目模板：<span style="color: red">*</span></label>
							<div class="layui-input-block">
								<input name="nodeTemplate" th:field="*{nodeTemplate}" placeholder="请输入栏目模板" type="text" class="layui-input" maxLength="25"/> <a onclick="select(1)" th:href="@{/admin/m/base/template/selectTemplate_nodeTemplate.gsp}" class="layui-btn" type="button"><i class="layui-icon">&#xe615;</i> </a>
							</div>
						</div>
						<div class="layui-inline" style="width: 350px;">
							<label class="layui-form-label">文档模板：<span style="color: red">*</span></label>
							<div class="layui-input-block">
								<input name="infoTemplate" th:field="*{infoTemplate}" placeholder="请输入文档模板" type="text" class="layui-input" maxLength="25"/><a onclick="select(2)" th:href="@{/admin/m/base/template/selectTemplate_infoTemplate.gsp}" class="layui-btn" type="button"><i class="layui-icon">&#xe615;</i></a>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline" style="width: 350px;">
							<label class="layui-form-label">是否隐藏：<span style="color: red">*</span></label>
							<div class="layui-input-block">
								<select name="hidden" th:field="*{hidden}">
									<option value="1">是</option>
									<option value="2">否</option>
								</select>
							</div>
						</div>
						<div class="layui-inline" style="width: 350px;">
							<label class="layui-form-label">真实栏目：<span style="color: red">*</span></label>
							<div class="layui-input-block">
								<select name="realNode" th:field="*{realNode}">
									<option value="1">是</option>
									<option value="2">否</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">排序：<span style="color: red">*</span></label>
						<div class="layui-input-block">
							<input type="number" th:field="*{sortOrder}" value="1" min="1" max="99" name="sortOrder" placeholder="请输入排序" lay-verify="sortOrder" required autocomplete="off" class="layui-input" autofocus="autofocus">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">链接地址：</label>
						<div class="layui-input-block">
							<input type="text" th:field="*{nodeLink}" name="nodeLink" placeholder="请输入链接地址" lay-verify="nodeLink" required autocomplete="off" class="layui-input" autofocus="autofocus" maxlength="150">
						</div>
					</div>
					<div id="formBuilderDiv"></div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit="" lay-filter="submit1">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div th:replace="fragments/footer_admin">底部</div>
	</div>
</body>
<div th:replace="fragments/import_js_admin">引入js</div>
<script th:src="@{/resources/js/common/formBuilder.js}"></script>
</html>
<script th:inline="javascript">
    /*<![CDATA[*/
    //页面层
    function select(flag) {
        var nodes =[];
        layer.open({
            type : 1,
            title:'请选择模版',
            skin : 'layui-layer-molv', //加上边框
            area : [ '1000px', '800px' ], //宽高
            content : '<div style="display: inline-block; width: 300px; height: 600px; padding: 10px; border: 1px solid #ddd; overflow: auto;"><ul id="fileTreeView"></ul></div><div id="fileListTable" class="site-tips" style="display: inline-block; height: 200px; width: 485px; padding: 10px; margin-left: 10px; vertical-align: top;"></div>',
            btn:['确定'],
            yes: function(index, layero){
                layer.close(index);
                //将选择的文件的路径赋值到界面上
                var selVal = $('#fileListTable input[name="optionsRadios"]:checked').val();
                console.log(selVal);
                if(flag==1){
                    $("#node").val(selVal);
                }else{
                    $("#info").val(selVal);
                }                             
            }
        });
        
        //获取树列表
        $.ajax({
            type: "POST",
            url: /*[[@{/admin/m/base/template/getFileTree.gsp}]]*/,
            data: {codeNum:/*[[${codeNum}]]*/},
            dataType: "json",
            async:false,
            success: function(data){   
                var nodeList=data.obj.nodes;
                listNodes(nodes,nodeList);
            }
        });
        layui.tree({
            elem : '#fileTreeView', // 指定元素      
            target : '_blank', //是否新选项卡打开（比如节点返回href才有效）      
            click : function(item) { //点击节点回调
                
                $.ajax({
                    type: "POST",
                    url: /*[[@{/admin/m/base/template/getFilesByPath.gsp}]]*/,
                    data: {parentPath:item.filePath},
                    dataType: "json",
                    success: function(data){                                                     
                        if(data==null){                           
                            $('#fileListTable').empty();
                            $('#fileListTable').append(
                                  '<table class="layui-table" lay-even="" lay-skin="row">'+
                                      '<thead><tr>'+
                                      '<th style="width:40px;">#</th>'+
                                      '<th style="width:200px;">名称</th>'+
                                      '<th style="width:100px;">类型</th>'+
                                      '<th style="width:100px;">大小</th>'+
                                      '<th style="width:40px;">操作</th></tr></thead>'+ 
                                    '<tbody><tr>'+
                                       '<td colspan="5" style="text-align: center;">暂时没有数据</td>'+
                                    '</tr></tbody></table>');
                        }else{                            
                            $('#fileListTable').empty();
                            $('#fileListTable').append(
                                  '<table class="layui-table" lay-even="" lay-skin="row">'+
                                    '<thead><tr>'+
                                       '<th style="width:40px;">#</th>'+
                                       '<th style="width:200px;">名称</th>'+
                                       '<th style="width:100px;">类型</th>'+
                                       '<th style="width:100px;">大小</th>'+
                                       '<th style="width:40px;">操作</th></tr></thead>'+ 
                                    '<tbody id="tbody"></tbody></table>');                          
                            $.each(data,function(index,file){
                                 $('#tboay').empty();
                                 var tr = $('<tr></tr>'); 
                                 var td1 = $('<td style="text-align: center;"></td>');
                                 var td2 = $('<td style="text-align: center;"></td>');
                                 var td3 = $('<td style="text-align: center;"></td>');
                                 var td4 = $('<td style="text-align: center;"></td>');
                                 var td5 = $('<td style="text-align: center;"></td>');
                                 td1.append('<label><input type="radio" value="'+file.filePath+'" name="optionsRadios" /></label>');
                                 if(file.leaf==false){
                                     td2.append('<label style="color:orange;">'+file.fileName+'</label>');
                                 }else{
                                     td2.append('<label style="color:blue;">'+file.fileName+'</label>');
                                 }
                                 if(file.format==""){
                                     td3.append('<i class="layui-icon" style="font-size: 25px; color: orange;">&#xe622;</i>');                        
                                 }else{
                                     td3.append(file.format);                              
                                 }
                                 td4.append(file.fileLength);
                                 td5.append('<a href="#" type="button" onclick="deleteFile(this)" filePath="' +file.filePath + '" class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon"></i></a>');
                                 tr.append(td1).append(td2).append(td3).append(td4).append(td5);
                                 $('#tbody').append(tr);
                            });
                        } 
                    }
                });       
            },
            nodes :nodes
        });    
        
    }
    
    function listNodes(parent,nodeList){
        nodeList.forEach(function(e) {
            var node = {};
            node["name"] = e.text;
            node["filePath"] = e.filePath;
            node["leaf"] = e.leaf;
            if(e.nodes.length>0){
                var chr = [];
                listNodes(chr,e.nodes);
                node["children"] = chr;
            }
            parent.push(node);
        })
    }
    var result = false;
    var id = /*[[${result.id}]]*/;
    //检查职务是否存在
    function checkNoddName(noddName){
        $.ajax({
            url:/*[[@{/admin/m/base/node/checkNoddName.gsp}]]*/,
            type:"post",
            async : false,
            data:{"id":id,"noddName":noddName},
            dataType:"json",
            success:function(data){              
                result = data;              
            }                                   
        });
        return result;
    }
    //检查头衔是否存在
    function checkCodeNum(codeNum){
        $.ajax({
            url:/*[[@{/admin/m/base/node/checkCodeNum.gsp}]]*/,
            type:"post",
            async : false,
            data:{"id":id,"codeNum":codeNum},
            dataType:"json",
            success:function(data){              
                result = data;          
            }                                   
        });
        return result;
    }
    var form = layui.form();
    //自定义验证规则
    form.verify({
        noddName : function(value) {
            if (value.length < 2) {
                return '栏目名称至少得2个字哦！';
            } else if (value.length > 20) {
                return '栏目名称太长哦，最长20个字！';
            } else if (checkNoddName(value)==false){
                return '该栏目名称已存在，请勿重复提交！';
            }
        },
        codeNum : function(value) {
            if (value.length < 2) {
                return '栏目代码至少得2个字哦！';
            } else if (value.length > 20) {
                return '栏目代码不能太长哦，最长20个字！';
            } else if (checkCodeNum(value)==false){
                return '该栏目代码已存在，请勿重复提交！';
            }
        },
        nodeLink : function(value) {
            if (value.length < 0) {
                return '链接地址不能为空哦！';
            }
        },
        nodeTemplate : function(value) {
            if (value.length < 1) {
                return '栏目模板至少得1个字哦！';
            } else if (value.length > 20) {
                return '栏目模板不能太长哦，最长20个字！';
            }
        },
        infoTemplate : function(value) {
            if (value.length < 2) {
                return '文档模板至少得2个字哦！';
            } else if (value.length > 50) {
                return '文档模板不能太长哦，最长50个字！';
            }
        },
        sortOrder : function(value) {
            if (value.length < 1) {
                return '排序字段不能小于1！';
            } else if (value.length > 99) {
                return '排序字段不能大于99！';
            }
        },
        nodeLink : function(value){
            if(value.length >140){
                return '链接地址不能大于140个字符！';
            }
        }
    });
    //监听提交
    form.on('submit(submit1)', function(data) {
    });
    
    var result = /*[[${result}]]*/null;
    formBuilder({
        ownerType : 'nodeModel',
        ownerId : $('select[name="nodeModelId"]').val(),
        valueOwnerId : /*[[${result.id}]]*/''
    }, result, function() {
        window.setTimeout("form.render();", 2000);
    });
    $('#editForm select[name="nodeModelId"]').change(function() {
        formBuilder({
            ownerType : 'nodeModel',
            ownerId : $(this).val(),
            valueOwnerId : /*[[${result.id}]]*/''
        }, result, function() {
            window.setTimeout("form.render();", 2000);
        });
    });
    /*]]>*/
</script>